<template>
	<div class="decorate-cityMain">
    <diy-tpl :tplData="tplData" :cityType="26"></diy-tpl>
    <a-map ref="aMaps" @getLoaction="getLoactionFn" />
  </div>
</template>

<script>
  import Vue from 'vue'
  import aMap from '@/views/shop/storeList/components/amap'
  import { getCityMain } from '@/api/shop/index'
  import diyTpl from '../../index'
  export default Vue.extend({
    name: 'index',
    components: {
      diyTpl,
      aMap
    },
    data() {
      return {
        tplData: [],
        background: ''
      }
    },
    props: {
      cityName: {
        type: [Number, String]
      },
      locationType: {
        type: [Number, String]
      },
      tplItemData: {
        type: Object,
        default() {
          return {}
        }

      }
    },
    watch: {
      'cityName'(val) {
        this.getCityMainFun()
      }
    },
    created() {
      if (this.tplItemData.LModules && this.tplItemData.LModules.length > 0) {
        this.tplData = this.tplItemData.LModules
      }
    },
    methods: {
      // 地图获取定位
      getLoactionFn(val) {
        // console.log(val)
        let name = ''
        if (val.address_component.district) {
          name += val.address_component.district + ','
        }
        if (val.address_component.city) {
          name += val.address_component.city + ','
        }
        if (val.address_component.province) {
          name += val.address_component.province + ','
        }
        if (val.address_component.country) {
          name += val.address_component.country
        }
  
        getCityMain({ name: name }).then(res => {
          if (res.status == 1) {
            // this.background = res.data
            if (res.data) {
              this.tplData = res.data
            }
          } else {
            this.tplData = ''
          }
        })
      },
      getCityMainFun() {
        const data = {
          name: this.cityName,
          location: this.locationType
        }
        getCityMain(data).then(res => {
          if (res.status == 1) {
            if (res.data) {
              this.tplData = res.data
            }
          } else {
            this.tplData = ''
          }
        })
      }
    }
  })
</script>

<style>
</style>
